<template>
	<view class="myMessage">
		<view class="m-box" v-for="(item,index) in msgList" :key="index" @tap="goDetail(item)">
			<view class="b-content">
				<view class="c-left">
					<view class="l-title">{{item.name}}</view>
					<view class="l-result">
					  <text>{{item.intro}}</text>
					</view>
				</view>
				<view class="c-right">
					{{item.content}}
				</view>
			</view>
			<view class="time_box">
				<view class="b-time">
					{{item.created_at}}
				</view>
				<view class="read_type_text">
					<view v-if="item.is_read===0">未读</view>
					<view v-else>已读</view>
				</view>

			</view>

		</view>
		<m-bottom></m-bottom>
	</view>
</template>

<script>
	export default{
		name:"myMessage",
		data(){
			return{
				msgList:[],
				page:1,
				is_load:0
			}
		},
		onReachBottom(){
			if(this.is_load>0){
				this.page++
				this.$store.commit("CHANGESHOWlOADING",true)
				setTimeout(()=>{
					this.$store.commit("CHANGESHOWlOADING",false)
				},1000)
			}

		},
		mounted(){
			this.getMyNewsList()
		},
		methods:{
			async getMyNewsList(){
				let resData = await this.$apis.getMyNewsList({access_token:''})
				this.msgList.push(...resData.data.lists)
				this.is_load=resData.data.is_load
			},
			goDetail(item){
				this.$router.push({
					route:this.$routesConfig.myNewsDetail,
					query:{id:item.id}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.myMessage{
		width: 100%;
		.m-box{
			width: 660rpx;
			box-sizing: border-box;
			padding: 25rpx 20rpx 0 25rpx;
			margin: 40rpx 45rpx;
			border: solid 1px #C8C7CC;
			border-radius: 20px;
			.b-content{
				display: flex;
				.c-left{
					box-sizing: border-box;
					padding-right: 15rpx;
					border-right: solid 1px #FF9502;
					flex-shrink: 0;
					.l-title{
						font-size: 28rpx;
						color: #333333;
					}
					.l-result{
						text{
							font-size: 24rpx;
							color:gray;
						}
					}
				}
				.c-right{
					padding-left: 10rpx;
					font-size: 26rpx;
					color: #333333;
					flex-grow: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

			}
			.b-time{
				width: 70%;
				font-size: 24rpx;
				color: gray;
				line-height: 100rpx;
			}
		}
		.m-box:last-of-type{
			border-bottom: none;
		}
	}
	.time_box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.read_type_text{
		text-align: center;
		width: 10%;
		height: 35rpx;
		color: #ffffff;
		font-size: 25rpx;
		transform: translate(0,100%);
		border-radius: 5px;
		background-color: #FF9502;

	}

</style>
